<template>
    <div>
        <el-form ref="search" :model="searchData" size="mini" style="display: inline-flex">
            <el-form-item prop="name">
                <el-input v-model="searchData.name" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item style="margin-left: 10px">
                <el-button-group>
                    <el-button type="primary" @click="list">查询</el-button>
                    <el-button type="primary" @click="reset('search')">重置</el-button>
                </el-button-group>
            </el-form-item>
        </el-form>
        <div style="padding-bottom:10px;text-align: right">
            <el-button-group>
                <el-button size="mini" type="primary" icon="el-icon-circle-plus-outline" @click="add"/>
                <el-button size="mini" type="danger" icon="el-icon-delete"/>
            </el-button-group>
        </div>
        <el-table :data="tableData" border style="width: 100%;" height="450">
            <el-table-column type="selection" width="36" fixed/>
            <el-table-column v-for="column in columns" :prop="column.prop" :label="column.label" header-align="center" :width="column.width"/>
            <el-table-column label="操作" fixed="right" width="150px" header-align="center" align="center">
                <template slot-scope="scope">
                    <el-button-group>
                        <el-button size="mini" @click="edit(scope.row.id)" type="primary" icon="el-icon-edit"/>
                        <el-button size="mini" @click="del(scope.row.id)" type="danger" icon="el-icon-delete"/>
                    </el-button-group>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="sizeChange" @current-change="currentChange"
                       :current-page="page" :page-sizes="[10, 20, 30, 40, 50]" :page-size="pageSize"
                       layout="total, sizes, prev, pager, next, jumper" :total="total"
                       style="margin-top:10px;text-align: right">
        </el-pagination>
        <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" max-height="">
            <el-row style="max-height: 350px;overflow: auto">
                <el-form ref="form" label-position="right" :model="formData" label-width="80px" size="small">
                    <el-col :span="12">
                        <el-form-item label="活动区域">
                            <el-select v-model="formData.region" placeholder="请选择活动区域" style="width: 90%">
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="活动名称" prop="name" :rules="[{required:true,message:'年龄不能为空'}]">
                            <el-input v-model="formData.name" clearable style="width: 90%"></el-input>
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-row>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" type="primary" @click="submit('form')">确 定</el-button>
                <el-button size="small" @click="cancel('form')">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                columns: [{
                    label: '时间',
                    prop: 'date',
                    width: 300,
                }, {
                    label: '姓名',
                    prop: 'name',
                    width: 300,
                }, {
                    label: '地址',
                    prop: 'address',
                    width: 300,
                }, {
                    label: '地址',
                    prop: 'address',
                    width: 300,
                }, {
                    label: '地址',
                    prop: 'address',
                    width: 300,
                }],
                formData: {
                    id: '',
                    name: '',
                    region: ''
                },
                searchData: {
                    name: '',
                    xx: ''
                },
                tableData: [],
                total: 500,
                pageSize: 10,
                page: 1,
                dialogFormVisible: false,
                dialogTitle: ''
            }
        },
        methods: {
            list() {
                this.tableData = [{
                    id: "111",
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                },];
                console.log("list")
            },
            add() {
                this.dialogTitle = '新增';
                this.dialogFormVisible = true;
            },
            edit(id) {
                this.dialogTitle = '修改';
                this.dialogFormVisible = true;
            },
            del(id) {
                console.log(id);
            },
            submit(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.dialogFormVisible = false;
                    } else {
                        return false;
                    }
                });
            },
            cancel(formName) {
                this.reset(formName);
                this.dialogFormVisible = false;
            },
            reset(formName) {
                this.$refs[formName].resetFields();
                if (formName === 'search') {
                    this.list();
                }
            },
            sizeChange(val) {
                this.pageSize = val;
            },
            currentChange(val) {
                this.page = val;
            },
        },
        created() {
            this.list()
        }
    }
</script>